クライアントへのPush通知[Geolocation APIとwebsocket-railsによる位置情報通知アプリ #2]

はじめに

前回はクライアント端末にて位置情報を取得し、サーバ側へ送信する処理について書きました。
今回はサーバ側にて、受け取った位置情報をwebsocket-railsを使い、別画面へPush通知する処理について
書きたいと思います。

websocket-railsによるPush送信

Push送信についても、前回と同じくwebsocket-railsを使用して行います。
処理を行うのは、前回見た、クライアントからのメッセージを受信するコントローラです。

Push送信についてはwebsocket-railsで簡単なPush通知を実装するを参考にしました。

app/controllers/location_controller.rb

class LocationController < WebsocketRails::BaseController def show puts message WebsocketRails[:location_channel].trigger "location", message end end [/ruby]

4行目でWebsocketRailsのtrigger()メソッドを呼び出し、受信したメッセージをそのまま送信しています。
前回書いたように、受信したメッセージは「message」変数に格納されています。
この時、チャンネル名には「location_channel」を、メッセージ名は「location」を設定しています。
後述するJavaScriptによる表示処理で、これらの名称を使用します。

JavaScriptによるメッセージの取得と表示

サーバ側よりPush送信されたメッセージをリアルタイムで表示するため
JavaScriptにてメッセージを取得し、表示する必要があります。
以下が、その処理と画面のソースです。

app/views/welcome/_location.html.erb

<div>
  <div class="div-geolocation-header">緯度</div>
  <div id="latitude">-</div>
  <div class="div-geolocation-header">経度</div>
  <div id="longitude">-</div>
  <div class="div-geolocation-header">移動方向</div>
  <div id="heading">-</div>
  <div class="div-geolocation-header">移動速度</div>
  <div id="speed">-</div>
</div>

app/assets/javascripts/welcome_show.js

var dispatcher = new WebSocketRails(location.host + '/websocket', true);

var channel = dispatcher.subscribe("location_channel");

channel.bind("location", function(message) {
    // 緯度
    document.querySelector('#latitude').textContent = message.latitude;
    // 経度
    document.querySelector('#longitude').textContent = message.longitude;
    // 移動方向
    document.querySelector('#heading').textContent = message.heading;
    // 移動速度
    document.querySelector('#speed').textContent = message.speed;
});

_location.html.erbについては、前回使用したものと同じです。

JavaScriptについては、1行目でWebSocketRailsのインスタンスを作成しています。これも前回と同じです。
3行目と5行目で、上記のサーバ側で指定したチャンネル名、メッセージ名を使用してPush送信されたメッセージを取得しています。
6行目以降で、取得したメッセージより緯度・経度等を表示しています。

まとめ

今回は2回に分けて書いてみました。
Geolocation API、websocket-railsを使い、位置情報を取得してPush通知を行う機能が
簡単に実現できました。